<template>
  <div class="content">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @row-click="getData"
      height="565px"
    >
      <!-- 表格数据渲染 -->
      <el-table-column
        v-for="item in linklist"
        :key="item.id"
        :label="item.name"
      >
        <template slot-scope="scope">
          <router-link
            :to="{ path: item.url, query: { editInfo: scope.row } }"
            v-if="item.isRouter"
            >{{ scope.row[titleList[item.id]] }}
          </router-link>
          <template v-else>
            {{ scope.row[titleList[item.id]] }}
          </template>
        </template>
      </el-table-column>
    </el-table>
    <Footer>
      <template v-slot:choose><div></div></template>
      <template v-slot:paging
        ><Page :total="totalSize" @getLimit="getLimit" @getPage="getPage"
      /></template>
    </Footer>
  </div>
</template>

<script>
import Page from "../components/Paging.vue";
import Footer from "../components/Footer.vue";
import { AddOrderAxios } from "../http/apis/orderApi";
import { timeFormat } from "../utils/utils";
export default {
  name: "List",
  data() {
    return {
      currentPage: 1,
      pageSize: 3,
      totalSize: 0,
      // 表格 数据属性名
      titleList: [
        "customer_name",
        "type",
        "contact_name",
        "contact_phone",
        "contact_qq",
        "enter_time",
        "employee_name",
      ],
      // 表格属性值
      tableData: [],
    };
  },
  components: {
    Page,
    Footer,
  },
  methods: {
    // 分页
    getLimit(val) {
      this.pageSize = val;
      console.log(this.pageSize);
      this.getCustomerInfo();
    },
    // 分页
    getPage(val) {
      this.currentPage = val;
      this.getCustomerInfo();
    },
    getData(row) {
      this.$emit("JumpEditPage", row);
    },
    getThisTotal() {
      this.$emit("getTotal", this.tableData.length);
      // console.log(123);
    },
    getCustomerInfo() {
      this.tableData = [];
      AddOrderAxios({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((res) => {
          console.log("客户列表请求成功", res.data);
          this.totalSize = res.data.data[1];
          let arr = res.data.data[0];
          arr.forEach((item) => {
            let obj = {
              order_id:item.order_id,
              Submit_order_date: item.Submit_order_date,
              consignee: item.consignee,
              consignee_phone: item.consignee_phone,
              consignee_address:item.consignee_address,
              contact_id: item.contact_id,
              customer_name: item.customer_name,
              type: item.type,
              contact_name: item.contact_name,
              customer_Id: item.customer_Id,
              contact_phone: item.contact_phone,
              contact_qq: item.contact_qq,
              enter_time: timeFormat(item.enter_time),
              employee_name: item.employee_name,
            };
            this.tableData.push(obj);
          });
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log("客户列表请求失败", err);
        });
    },
  },
  created() {
    this.getCustomerInfo();
  },
  mounted() {
    this.getThisTotal();
  },
  props: {
    // 跳转路由
    linklist: Array,
  },
};
</script>

<style>
</style>